import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import React from 'react';
import { Modal, Button } from 'antd';
import styles from './index.less';

const TotalData = props => {

  const { totalModalVisible, onCancel, totalData } = props;

  return (
    <Modal
      destroyOnClose={true}
      title="金额统计"
      visible={totalModalVisible}
      onCancel={() => onCancel()}
      className={styles.totalModal}
      width={700}
      centered={true}
      footer={null}
    >
      <div style={{
        display: 'flex',
        justifyContent: 'space-around',
        height: '300px',
        width: '100%'
      }}>
        <div style={{ flex: '1' }}>
          <div className={styles.title}>总额统计</div>
          <div className={styles.subTitle}>
            <span>总额类别</span>
            <span>总计</span>
          </div>
          <div className={styles.cont}>
            <span>授权总额</span>
            <span>{totalData && totalData.allMoney}</span>
          </div>
          <div className={styles.cont}>
            <span>支付总额</span>
            <span>{totalData && totalData.payAllMoney}</span>
          </div>
          <div className={styles.cont}>
            <span>差异总额</span>
            <span>{totalData && totalData.diffAllMoney}</span>
          </div>
        </div>
        <div style={{ flex: 1 }}>
          <div className={styles.title}>支付方式统计</div>
          <div className={styles.subTitle}>
            <span>支付方式</span>
            <span>总计</span>
          </div>
          <div className={styles.cont}>
            <span>微信支付</span>
            <span>{totalData && totalData.wxMoney}</span>
          </div>
          <div className={styles.cont}>
            <span>支付宝支付</span>
            <span>{totalData && totalData.alipayMoney}</span>
          </div>
          <div className={styles.cont}>
            <span>银联支付</span>
            <span>{totalData && totalData.unionpayMoney}</span>
          </div>
          <div className={styles.cont}>
            <span>现金支付</span>
            <span>{totalData && totalData.cashMoney}</span>
          </div>
        </div>
        <div style={{ flex: 1 }}>
          <div className={styles.title}>补偿统计</div>
          <div className={styles.subTitle}>
            <span>补偿类型</span>
            <span>总计</span>
          </div>
          <div className={styles.cont}>
            <span>补偿总人数</span>
            <span>{totalData && totalData.paxNumber}</span>
          </div>
          <div className={styles.cont}>
            <span>实际补偿人数</span>
            <span>{totalData && totalData.realPaxNumber}</span>
          </div>
          <div className={styles.cont}>
            <span>补偿班次</span>
            <span>{totalData && totalData.flightCount}</span>
          </div>
          <div className={styles.cont}>
            <span>微信补偿人数</span>
            <span>{totalData && totalData.wxCount}</span>
          </div>
          <div className={styles.cont}>
            <span>支付宝补偿人数</span>
            <span>{totalData && totalData.alipayCount}</span>
          </div>
          <div className={styles.cont}>
            <span>银联补偿人数</span>
            <span>{totalData && totalData.unionpayCount}</span>
          </div>
          <div className={styles.cont}>
            <span>现金补偿人数</span>
            <span>{totalData && totalData.cashCount}</span>
          </div>
        </div>
      </div>

      <div style={{ textAlign: 'center', marginTop: '10px' }}>
        <Button type='primary' onClick={onCancel}>关闭</Button>
      </div>
    </Modal>
  );
};

export default Form.create()(TotalData);
